<template>
    <div style="padding: 15px 20px 15px 5px">
        <div class="pre-text">{{ text }}</div>
        <vol-form ref="form" :labelWidth="80" :load-key="false" :formFields="fields" :formRules="formOptions">
        </vol-form>



        <div class="form-btns">
            <el-button type="primary" @click="submit" icon="el-icon-check" size="mini">提交</el-button>
            <el-button type="primary" @click="reset" plain icon="el-icon-refresh-right" size="mini">重置</el-button>
        </div>
    </div>
</template>

<script>
function flattenObject(obj, parentKey = '') {
    let flattened = {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            let newKey = parentKey ? `${parentKey}.${key}` : key;
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                // 如果是对象，则递归处理
                Object.assign(flattened, flattenObject(obj[key], newKey));
            } else {
                flattened[newKey] = obj[key];
            }
        }
    }
    return flattened;
}

// 使用方式：
// 1、新建一个vue页面，把此页面内容复制进去
// 2、router->index.js配置路由，页面上输入地址即可看到数据(也可以把菜单配置上)
// 3、或者参照表单设计页面做动态页面
//**表单设计器的table下载还在开发中
import axios from 'axios'
import VolForm from '@/components/basic/VolForm'
export default {
    components: { "vol-form": VolForm, },
    data() {
        return {
            text: "",
            tabsModel: "0",
            fields: { "ConsumerId": null, "OrderNumber": null, "OrderId": null, "MakeupPeople": null, "MakeupTime": null, "Remark": null },
            formOptions: [[{ "field": "ConsumerId", "title": "移库单号", "type": "text", "required": false, "readonly": false, "colSize": null },
            { "field": "OrderNumber", "title": "移库单类型", "type": "select", "required": false, "readonly": false, "colSize": null, "data": [{ "key": "3", "value": "移库上架" }, { "key": "2", "value": "仓库移库" }, { "key": "1", "value": "报损移库" }], "dataKey": "移库类型" },
            { "field": "OrderId", "title": "关联订单号", "type": "text", "required": false, "readonly": false, "colSize": null }],
            [{ "field": "MakeupPeople", "title": "制单人", "type": "text", "required": false, "readonly": false, "colSize": null },
            { "field": "MakeupTime", "title": "制单时间", "type": "date", "required": false, "readonly": false, "colSize": null },
            { "field": "Remark", "title": "备注", "type": "textarea", "required": false, "readonly": false, "colSize": null }]],
            tables: [],
            tabs: []
        };
    },
    created() {

    },
    methods: {
        async submit() {
            //   console.log(this.fields);
            const response = await axios.get('/api/Consumerinfo/GetPageDatas');
            this.tables = response.data;
            console.log(this.tables);

            // 合并数据成一个对象
            const combinedObject = { ...this.tables, ...this.fields };
            this.combinedData = combinedObject;
            console.log("表格加表单", this.combinedData);
            const flattenedCombinedData = flattenObject(this.combinedData);

            const fieldsToSend = {}
            const { rows } = this.tables;
            for (let i = 0; i < rows.length; i++) {
                for (let key in rows[i]) {
                    fieldsToSend[key] = rows[i][key];
                }
            }
            for (let key in flattenedCombinedData) {

                fieldsToSend[key] = flattenedCombinedData[key];
            }

            console.log(fieldsToSend);
            await axios.post('/api/ConsumerinfoDTO/Adds', fieldsToSend)
                .then(response => {
                    console.log(response.data)
                    if (response.data > 0) {
                        this.$Message.success("移库成功");
                    }
                    else {
                        this.$Message.error("移库失败");
                    }
                })
                .catch(error => {
                    console.error(error);
                });


        },
        reset() {
            this.$refs.form.reset();
            this.$Message.success("表单已重置")
        },
        download() {
            this.$Message.info("111")
        }
    }
};

VolForm;
</script>
<style lang="less" scoped>
.form-btns {
    text-align: center;
}

.tables {
    padding-left: 15px;

    .table-item {
        padding: 10px;
    }

    .table-header {
        display: flex;
        margin-bottom: 8px;
    }

    .header-text {
        position: relative;
        bottom: -9px;
        flex: 1;
        font-weight: bold;
    }

    .header-btns {
        text-align: right;
    }
}
</style>